<!--默认大小-->
<script lang="ts" setup>
import {computed, reactive} from 'vue'
import useThemeStore from '@/store/theme'

const themeStore = useThemeStore()
const assemblySize = computed((): string => themeStore.assemblySize)
const assemblySizeList = reactive<string[]>(['default', 'large', 'small'])
const assemblySizeListCh = reactive<Record<string, any>>({
	default: '默认',
	large: '大型',
	small: '小型'
})
const setAssemblySize = (item: string) => {
	if (assemblySize.value === item) return
	themeStore.setAssemblySizeSize(item)
}
</script>

<template>
	<el-dropdown trigger="click" @command="setAssemblySize">
		<i :class="'iconfont icon-contentright'" class="toolBar-icon"/>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item v-for="item in assemblySizeList" :key="item" :command="item" :disabled="assemblySize === item">
					{{ assemblySizeListCh[item] }}
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<style lang="scss" scoped>

</style>
